import React from 'react';
import { TextInput } from 'react-native';
import styleLib from '../styles';

const { inputStyle, inputText, inputPlaceHolder } = styleLib;

export default class Input extends React.Component {
  constructor() {
    super();
    this.state = {
      focus: false
    };
    this.content = null;
  }

  onEndEditing = () => {
    const { onEndEditing } = this.props;
    onEndEditing && onEndEditing(this.content);
  };

  onChangeText = (content) => {
    const { onChangeText } = this.props;
    if (onChangeText) {
      onChangeText(content);
    } else {
      this.content = content;
    }
  };

  setRef = (text) => {
    this.textinput = text;
  };

  getRef = () => this.textinput;

  clear = () => {
    this.textinput && this.textinput.clear();
  };

  // textinput 失去焦点
  blur = () => {
    this.textinpu && this.textinpu.blur();
  };

  render() {
    const { style: propsStyle } = this.props;
    const { focus } = this.state;
    return (
      <TextInput
        numberOfLines={1}
        underlineColorAndroid="transparent"
        placeholderTextColor={inputPlaceHolder.color}
        {...this.props}
        style={{ ...inputStyle, ...inputText, ...propsStyle }}
        ref={(textinput) => {
          this.textinput = textinput;
        }}
        autoFocus={focus}
        onChangeText={this.onChangeText}
        onEndEditing={this.onEndEditing}
      />
    );
  }
}
